<template>
  <div class="operBanner">
    <el-table :data="bannerList">
      <el-table-column fixed prop="bannerId" label="轮播图索引" width="100" align="center">
      </el-table-column>

      <el-table-column prop="videoTitle" label="视频标题" width="300" align="center">
      </el-table-column>

      <el-table-column prop="videoId" label="所属视频ID" width="300" align="center">
      </el-table-column>

      <el-table-column align="center" width="300">
        <template slot-scope="scope">
          <el-button class="tableButton" @click="getBanner(scope.row.bannerId)" type="primary" size="small">查看
          </el-button>
          <el-button class="tableButton" @click="openUpdateBanner(scope.row.bannerId)" type="success" size="small">
            编辑
          </el-button>
          <el-button class="tableButton" @click="handleDelete(scope.row.bannerId)" type="danger" size="small">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看详情 -->
    <el-dialog title="轮播图详情" :visible.sync="dialogDetailVisible">
      <div class="banner-detail-block">
        <div class="banner-img">
          <el-image style="width: 300px; height: 150px" :src="bannerInfo.thumbnail"></el-image>
        </div>

        <div class="banner-main-detail">
          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="视频标题">{{
              bannerInfo.videoTitle
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-dialog>

    <!-- 编辑轮播图 -->
    <el-dialog title="选择视频" :visible.sync="dialogFormVisible" @close="handleClose">
      <el-input style="margin-bottom: 30px" prefix-icon="el-icon-search" v-model="search" size="big"
        placeholder="通过视频标题搜索" />

      <el-table :data="videoList" border style="width: 100%">
        <el-table-column fixed prop="videoId" label="视频ID" width="400">
        </el-table-column>

        <el-table-column prop="videoTitle" label="视频标题" width="400">
        </el-table-column>

        <el-table-column align="right">
          <template slot-scope="scope">
            <el-button class="tableButton" @click="updateBanner(scope.row.videoId)" type="primary" size="big">
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="openUpdateBanner()" />
    </el-dialog>
  </div>
</template>

<script>
import {
  getBannerList,
  getBanner,
  updateBanner,
  deleteBanner,
} from "@/api/banner";
import { getVideoTableData } from "@/api/video";

export default {
  name: "operBanner",

  data() {
    return {
      bannerList: null,
      dialogDetailVisible: false,
      dialogFormVisible: false,
      bannerInfo: {},

      videoList: null,

      queryParams: {
        pageNum: 1,
        pageSize: 5
      },

      total: 0,

      search: "",

      banner: {
        banner_id: "",
        video_id: "",
      },
    };
  },

  created() {
    this.getBannerList();
  },

  methods: {
    getBannerList() {
      getBannerList().then((res) => {
        this.bannerList = res.data;
      });
    },

    getBanner(bannerId) {
      this.dialogDetailVisible = true;
      getBanner(bannerId).then((res) => {
        this.bannerInfo = res.data;
      });
    },

    handleClose() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 5;
    },

    openUpdateBanner(bid) {
      if (!bid) bid = this.banner.banner_id;

      this.dialogFormVisible = true;
      this.banner.banner_id = bid;
      getVideoTableData(this.queryParams).then((res) => {
        this.videoList = res.rows;
        this.total = res.total;
      });
    },

    updateBanner(vid) {
      this.banner.video_id = vid;
      updateBanner(this.banner).then((res) => {
        console.log(res);
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        this.dialogFormVisible = false;
        this.getBannerList();
      });
    },

    handleDelete(bid) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteBanner(bid).then((res) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getBannerList();
        });
      });
    },
  },

  watch: {
    search(val) {
      this.queryParams.videoTitle = val;
      this.openUpdateBanner(this.banner.bid);
    },
  },
};
</script>

<style lang="scss" scoped>
.tableButton {
  margin-right: 15px;
}

.banner-detail-block {
  text-align: center;
}

.pagination {
  margin-top: 20px;
}
</style>
